<template>
  <div class="notification-container">
    <div class="notification-header">
      <h2>通知中心</h2>
      <div class="filter">
        <el-radio-group v-model="activeType" size="small">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="unread">未读</el-radio-button>
          <el-radio-button label="read">已读</el-radio-button>
        </el-radio-group>
        <el-select v-model="selectedCategory" placeholder="通知类型" size="small">
          <el-option label="全部类型" value=""></el-option>
          <el-option label="系统通知" value="system"></el-option>
          <el-option label="供应商消息" value="supplier"></el-option>
          <el-option label="产品变更" value="product"></el-option>
          <el-option label="质量反馈" value="quality"></el-option>
        </el-select>
      </div>
    </div>
    
    <div class="notification-actions">
      <el-button size="small" type="primary" @click="markAllAsRead" :disabled="getUnreadCount === 0">
        全部标记为已读
      </el-button>
      <el-button size="small" type="danger" @click="deleteSelectedNotifications" :disabled="selectedNotifications.length === 0">
        删除所选通知
      </el-button>
    </div>
    
    <div class="notification-list">
      <el-table
        ref="notificationTable"
        :data="filteredNotifications"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          width="50">
          <template slot-scope="scope">
            <div class="notification-status">
              <span v-if="!scope.row.read" class="unread-dot"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="标题"
          prop="title">
          <template slot-scope="scope">
            <div class="notification-title" :class="{ 'unread': !scope.row.read }">
              <span v-if="scope.row.category === 'system'" class="category-tag system">系统</span>
              <span v-else-if="scope.row.category === 'supplier'" class="category-tag supplier">供应商</span>
              <span v-else-if="scope.row.category === 'product'" class="category-tag product">产品</span>
              <span v-else-if="scope.row.category === 'quality'" class="category-tag quality">质量</span>
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="发送时间"
          prop="time"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleView(scope.$index, scope.row)">查看</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredNotifications.length">
    </el-pagination>
    
    <el-dialog title="通知详情" :visible.sync="dialogVisible" width="50%">
      <div class="notification-detail">
        <h3>{{ currentNotification.title }}</h3>
        <div class="notification-meta">
          <span>发送时间: {{ currentNotification.time }}</span>
          <span>类型: {{ getCategoryName(currentNotification.category) }}</span>
        </div>
        <div class="notification-content">
          <p v-html="currentNotification.content"></p>
        </div>
        <div v-if="currentNotification.attachments && currentNotification.attachments.length" class="notification-attachments">
          <h4>附件</h4>
          <div class="attachment-list">
            <div v-for="(attachment, index) in currentNotification.attachments" :key="index" class="attachment-item">
              <i class="el-icon-document"></i>
              <span>{{ attachment.name }}</span>
              <el-button size="mini" type="text">下载</el-button>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleReply" v-if="currentNotification.canReply">回复</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeType: 'all',
      selectedCategory: '',
      notifications: [
        {
          id: 1,
          title: '系统升级通知',
          time: '2023-03-24 10:00',
          category: 'system',
          read: false,
          content: '尊敬的用户，我们将于2023年3月25日凌晨2:00-4:00进行系统升级维护，期间系统将暂停访问。请您提前做好相关准备工作，由此给您带来的不便，敬请谅解。',
          attachments: [],
          canReply: false
        },
        {
          id: 2,
          title: '新供应商申请加入',
          time: '2023-03-23 14:30',
          category: 'supplier',
          read: false,
          content: '湖南绿色农场有限公司申请成为您的供应商，请查看其资质并进行审核。<br><br><strong>基本信息：</strong><br>公司名称：湖南绿色农场有限公司<br>经营范围：有机蔬菜种植、销售<br>联系人：张三<br>联系电话：13800138000',
          attachments: [
            { name: '营业执照.pdf', url: '#' },
            { name: '食品生产许可证.pdf', url: '#' }
          ],
          canReply: true
        },
        {
          id: 3,
          title: '产品价格变动提醒',
          time: '2023-03-22 09:15',
          category: 'product',
          read: true,
          content: '您关注的原材料"鲜切土豆"价格已发生变化，最新价格为9.8元/公斤，相比上周上涨了8%。建议您及时调整采购计划。',
          attachments: [],
          canReply: false
        },
        {
          id: 4,
          title: '产品质量反馈',
          time: '2023-03-21 16:40',
          category: 'quality',
          read: true,
          content: '收到消费者对"香辣牛肉饺子"批次号SZ20230320的质量反馈，反映部分产品包装有破损情况。请相关部门及时跟进处理。',
          attachments: [
            { name: '消费者反馈截图.jpg', url: '#' }
          ],
          canReply: true
        },
        {
          id: 5,
          title: '食品安全检测报告',
          time: '2023-03-20 11:20',
          category: 'system',
          read: false,
          content: '您的产品"老坛酸菜鱼"完成了本月的食品安全检测，各项指标均符合国家标准。请查看详细报告。',
          attachments: [
            { name: '检测报告.pdf', url: '#' }
          ],
          canReply: false
        }
      ],
      selectedNotifications: [],
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      currentNotification: {}
    }
  },
  
  computed: {
    filteredNotifications() {
      let result = [...this.notifications]
      
      // 根据已读/未读状态筛选
      if (this.activeType === 'read') {
        result = result.filter(item => item.read)
      } else if (this.activeType === 'unread') {
        result = result.filter(item => !item.read)
      }
      
      // 根据类别筛选
      if (this.selectedCategory) {
        result = result.filter(item => item.category === this.selectedCategory)
      }
      
      return result
    },
    
    getUnreadCount() {
      return this.notifications.filter(item => !item.read).length
    }
  },
  
  methods: {
    handleSelectionChange(val) {
      this.selectedNotifications = val
    },
    
    handleView(index, row) {
      this.currentNotification = { ...row }
      this.dialogVisible = true
      
      // 标记为已读
      if (!row.read) {
        const notificationIndex = this.notifications.findIndex(item => item.id === row.id)
        if (notificationIndex !== -1) {
          this.notifications[notificationIndex].read = true
        }
      }
    },
    
    handleDelete(index, row) {
      this.$confirm('确认要删除这条通知吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.notifications.findIndex(item => item.id === row.id)
        if (index !== -1) {
          this.notifications.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      }).catch(() => {
        // 取消删除操作
      })
    },
    
    deleteSelectedNotifications() {
      if (this.selectedNotifications.length === 0) return
      
      this.$confirm(`确认要删除选中的 ${this.selectedNotifications.length} 条通知吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const idsToDelete = this.selectedNotifications.map(item => item.id)
        this.notifications = this.notifications.filter(item => !idsToDelete.includes(item.id))
        this.$message({
          type: 'success',
          message: '批量删除成功!'
        })
        this.selectedNotifications = []
      }).catch(() => {
        // 取消删除操作
      })
    },
    
    markAllAsRead() {
      if (this.getUnreadCount === 0) return
      
      this.notifications.forEach(item => {
        if (!item.read) {
          item.read = true
        }
      })
      
      this.$message({
        type: 'success',
        message: '已全部标记为已读!'
      })
    },
    
    handleReply() {
      // 跳转到消息页面并创建一个新的回复消息
      this.$router.push({
        path: '/interaction/messages',
        query: {
          reply: this.currentNotification.id
        }
      })
      this.dialogVisible = false
    },
    
    handleSizeChange(val) {
      this.pageSize = val
    },
    
    handleCurrentChange(val) {
      this.currentPage = val
    },
    
    getCategoryName(category) {
      const categoryMap = {
        'system': '系统通知',
        'supplier': '供应商消息',
        'product': '产品变更',
        'quality': '质量反馈'
      }
      return categoryMap[category] || '其他'
    }
  }
}
</script>

<style scoped>
.notification-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.notification-header h2 {
  margin: 0;
  font-size: 18px;
}

.filter {
  display: flex;
  gap: 15px;
}

.notification-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.notification-list {
  margin-bottom: 20px;
}

.notification-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f56c6c;
  display: inline-block;
}

.notification-title {
  display: flex;
  align-items: center;
}

.notification-title.unread {
  font-weight: bold;
}

.category-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
  margin-right: 8px;
  color: #fff;
}

.category-tag.system {
  background-color: #409eff;
}

.category-tag.supplier {
  background-color: #67c23a;
}

.category-tag.product {
  background-color: #e6a23c;
}

.category-tag.quality {
  background-color: #f56c6c;
}

.notification-detail h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.notification-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.notification-content {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 20px;
}

.notification-content p {
  margin: 0;
  line-height: 1.6;
}

.notification-attachments h4 {
  font-size: 14px;
  margin-bottom: 10px;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.attachment-item i {
  margin-right: 8px;
  color: #909399;
}

.attachment-item span {
  flex: 1;
}
</style> 